<script setup>
import {PerfectScrollbar} from 'vue3-perfect-scrollbar'
import {VForm} from 'vuetify/components/VForm'
import {defineEmits, ref} from "vue";
import {useApi} from "@/composables/useApi.js";
import showTost from "@/components/toast/index.js";

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  detailData: {
    type: Object,
    required: true
  },
  title: {
    type: String,
    default: '详情'
  },

  gradeList: {
    type: Array,
    required: true
  },
  tabsIndex:{
    type: Number,
    default: 0
  },
  teacherList:{
    type: Array,
  },
  madelList:{
    type: Array,
  }
})

const emit = defineEmits(['update:isDrawerOpen', 'onHandleEdit', 'onHandleDelete'])

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}

const refVForm = ref()
const resetForm = () => {


  emit('update:isDrawerOpen', false)
}

const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen', false)
  nextTick(() => {
    refVForm.value?.reset()
    refVForm.value?.resetValidation()
  })
}
const form = ref({})
const assignmentData = () => {
  console.log(props.detailData)
  form.value = JSON.parse(JSON.stringify(props.detailData))
  form.value.teacher_id = Number(form.value.teacher_id)
  if(form.value.edRadius==1){
    form.value.classId = [-1]
  }
  console.log(form.value)
}

import {storeToRefs} from "pinia"
import {useAppStore} from "../../../store/app"
import {standardAddModify} from "@/api/standard.js";
import {medalAddModify, medalRecordAddModify} from "@/api/medal.js";

const appStore = useAppStore()

const {nationArr, sexArr} = storeToRefs(appStore)
watch(() => props.isDrawerOpen, () => {
  assignmentData()
})
const isEdit = ref(false)
let sexList = ref(['男', '女'])

const onHandleEditData = async () => {
  if (isEdit.value === true) {

    const {data} = await useApi('/teacher/Api.Schooltest/add').post(form.value)
    if (data.value.status == 200) {
      refVForm.value?.reset()
      emit('onHandleEdit')
      emit('update:isDrawerOpen', false)

      showTost("修改成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      await getList()
    } else {
      console.log(data.value.msg)
      // showTost("新增成功", {duration: 3000, type: "success"})

      showTost(data.value.msg, {duration: 3000, type: "error"})
    }


  } else {
    isEdit.value = true
  }
}

const onDelete = () => {
  emit('onHandleDelete', form.value)
}
const required = (value, name) => !!value || `${name}为必填字段`;
const onlyAllowNumbers = (event) => {
  const key = event.key;
  // 检查按键是否为数字或控制键（如 backspace）
  if (!/^\d$/.test(key) && event.key !== 'Backspace' && event.key !== 'Tab') {
    event.preventDefault();
  }
}
const filterInput =(key) => {
  // 仅保留数字
  form.value[key] = form.value[key].replace(/\D/g, '');
}
let totalScore = computed(()=>{
  return Number(form.value.languageScore)    +  Number(form.value.mathsScore) + Number(form.value.englishScore)
})


const projectList = ref(['德','智','体','美','劳'])



const testWayList = ref([{title:'结果',value:1},{title:'分值',value:2}])

const resultList = ref (['通过','不通过'])
// 打分规则
const scoringRuleList = ref(['成绩=分值'])
</script>

<template>
  <VNavigationDrawer
    :model-value="props.isDrawerOpen"
    temporary
    location="end"
    width="370"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Header -->
    <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    />
    <VDivider/>

    <VCard flat>
      <PerfectScrollbar
        :options="{ wheelPropagation: false }"
        class="h-100"
      >
        <VCardText style="block-size: calc(100dvh - 5rem);display: flex;flex-direction: column;">
          <VForm
            :disabled="!isEdit"
            ref="refVForm"
            @submit.prevent=""
          >
            <VRow>
              <VCol cols="6">
                <VTextField
                  v-model="form.title"
                  label="测试名称"
                  :rules="[(val)=>required(val,'测试名称')]"
                >
                  <template v-slot:label>
                    <span>测试名称</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VTextField>
              </VCol>
              <VCol cols="6">
                <v-autocomplete
                  label="面向范围"
                  v-model="form.teacher_id"
                  item-title="real_name"
                  item-value="teacher_id"
                  :items="teacherList"
                  variant="outlined"
                >
                  <template v-slot:label>
                    <span>负责教师</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </v-autocomplete>
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.examine"
                  :items="testWayList"
                  item-title="title"
                  item-value="value"
                  :rules="[(val)=>required(val,'考核方式')]"
                  class="input-width-height"
                >
                  <template v-slot:label>
                    <span>考核方式</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VSelect>
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-if="form.examine==1"
                  v-model="form.result"
                  :items="resultList"
                  item-title="item"
                  item-value="item"
                  :rules="[(val)=>required(val,'考试成绩')]"
                  class="input-width-height"
                >
                  <template v-slot:label>
                    <span>考试成绩</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VSelect>
                <VTextField
                  v-else
                  v-model="form.result"
                  label="考试成绩"
                  :rules="[(val)=>required(val,'考试成绩')]"
                >
                  <template v-slot:label>
                    <span>考试成绩</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VTextField>
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.project"
                  :items="projectList"
                  item-title="item"
                  item-value="item"
                  :rules="[(val)=>required(val,'关联项目')]"
                  class="input-width-height"
                >
                  <template v-slot:label>
                    <span>关联项目</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VSelect>
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.score"
                  label="赋予分值"
                  :rules="[(val)=>required(val,'赋予分值')]"
                >
                  <template v-slot:label>
                    <span>赋予分值</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VTextField>
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.stipulate"
                  :items="scoringRuleList"
                  item-title="item"
                  item-value="item"
                  :rules="[(val)=>required(val,'打分规定')]"
                  class="input-width-height"
                >
                  <template v-slot:label>
                    <span>打分规定</span>
                    <span  style="color: red;margin-left: 4px;">*</span>
                  </template>
                </VSelect>
              </VCol>
              <VCol cols="6">
              </VCol>
              <VCol cols="12">
                <VTextarea
                  type="textarea"
                  v-model="form.content"
                  label="测试详情介绍"
                  placeholder="请输入"
                >
                </VTextarea>
              </VCol>
            </VRow>

          </VForm>
          <div class="d-flex justify-end" style="height:60px;margin-top: auto">

            <VBtn
              color="primary"
              class="me-4"
              @click="onHandleEditData"
            >
              {{ isEdit == true ? '保存' : '编辑' }}
            </VBtn>
            <VBtn
              color="error"
              variant="outlined"
              @click="onDelete"
            >
              删除
            </VBtn>
          </div>
        </VCardText>
      </PerfectScrollbar>
    </VCard>
  </VNavigationDrawer>
</template>

<style lang="scss">
.v-navigation-drawer__content {
  overflow-y: hidden !important;
}
</style>
